<template >
  <div style="background: darkcyan;     height: 100vh;" >
  <div class="container-v" >
    <el-form   ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">萝卜多后台管理</h3>
      <el-form-item label="账号" prop="name">
        <el-input type="text" placeholder="请输入账号" v-model="form.name"/>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" placeholder="请输入密码" v-model="form.pwd"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: "Login",
    data() {
      return {
        form: {
          name:[],
          pwd: [],
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          name: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        this.$axios.post('/a/login',qs.stringify(this.form)).then(res=>{
          // console.log(res.data)
          const data = res.data;
           const users=[];
          for (let key in data ){
            const user=data[key];
            // console.log(user)
            users.push(user)
          }
          // console.log(users);
          //实现过滤
          let result=users.filter((user)=>{
            return user.name ===this.name && user.pwd === this.pwd
          });
          // console.log(result);
          if(result  != u && result.length > 0){
            this.$router.push("/");
            console.log(result)
          }else {
            alert('账号或密码错误')

          }
        });
        // 为表单绑定验证功能
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
        //     this.$router.push("/");
        //   } else {
        //     this.dialogVisible = true;
        //     return false;
        //   }
        // });
      }
    }
  }
</script>

<style >



  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
    background:rgb(255,255,255,0.8);
    margin-bottom: 191px;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }


  .container-v{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }




</style>





















































































































































<!--<template>-->
<!--  <div class="login-container">-->
<!--    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">-->

<!--      <div class="title-container">-->
<!--        <h3 class="title">Login Form</h3>-->
<!--      </div>-->

<!--      <el-form-item prop="username">-->
<!--        <span class="svg-container">-->
<!--&lt;!&ndash;          <svg-icon icon-class="user" />&ndash;&gt;-->
<!--        </span>-->
<!--        <el-input-->
<!--          ref="username"-->
<!--          v-model="loginForm.username"-->
<!--          placeholder="Username"-->
<!--          name="username"-->
<!--          type="text"-->
<!--          tabindex="1"-->
<!--          autocomplete="on"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>-->
<!--        <el-form-item prop="password">-->
<!--          <span class="svg-container">-->
<!--&lt;!&ndash;            <svg-icon icon-class="password" />&ndash;&gt;-->
<!--          </span>-->
<!--          <el-input-->
<!--            :key="passwordType"-->
<!--            ref="password"-->
<!--            v-model="loginForm.password"-->
<!--            :type="passwordType"-->
<!--            placeholder="Password"-->
<!--            name="password"-->
<!--            tabindex="2"-->
<!--            autocomplete="on"-->
<!--            @keyup.native="checkCapslock"-->
<!--            @blur="capsTooltip = false"-->
<!--            @keyup.enter.native="handleLogin"-->
<!--          />-->
<!--&lt;!&ndash;          <span class="show-pwd" @click="showPwd">&ndash;&gt;-->
<!--&lt;!&ndash;            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />&ndash;&gt;-->
<!--&lt;!&ndash;          </span>&ndash;&gt;-->
<!--        </el-form-item>-->
<!--      </el-tooltip>-->

<!--      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>-->

<!--      <div style="position:relative">-->
<!--        <div class="tips">-->
<!--          <span>Username : admin</span>-->
<!--          <span>Password : any</span>-->
<!--        </div>-->
<!--        <div class="tips">-->
<!--          <span style="margin-right:18px;">Username : editor</span>-->
<!--          <span>Password : any</span>-->
<!--        </div>-->

<!--        <el-button class="thirdparty-button" type="primary" @click="showDialog=true">-->
<!--          Or connect with-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-form>-->

<!--    <el-dialog title="Or connect with" :visible.sync="showDialog">-->
<!--      Can not be simulated on local, so please combine you own business simulation! ! !-->
<!--      <br>-->
<!--      <br>-->
<!--      <br>-->
<!--      <social-sign />-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import { validUsername } from '@/utils/validate'-->
<!--  import{ SocialSign} from '@/components/SocialSignin'-->

<!--  export default {   //export default 模块指定的默认输出-->

<!--    name: 'Login',-->
<!--    components: { SocialSign },-->
<!--    data() {-->
<!--      const validateUsername = (rule, value, callback) => {-->
<!--        if (!validUsername(value)) {-->
<!--          callback(new Error('Please enter the correct user name'))-->
<!--        } else {-->
<!--          callback()-->
<!--        }-->
<!--      }-->
<!--      const validatePassword = (rule, value, callback) => {-->
<!--        if (value.length < 6) {-->
<!--          callback(new Error('The password can not be less than 6 digits'))-->
<!--        } else {-->
<!--          callback()-->
<!--        }-->
<!--      }-->
<!--      return {-->
<!--        loginForm: {-->
<!--          username: 'admin',-->
<!--          password: '111111'-->
<!--        },-->
<!--        loginRules: {-->
<!--          username: [{ required: true, trigger: 'blur', validator: validateUsername }],-->
<!--          password: [{ required: true, trigger: 'blur', validator: validatePassword }]-->
<!--        },-->
<!--        passwordType: 'password',-->
<!--        capsTooltip: false,-->
<!--        loading: false,-->
<!--        showDialog: false,-->
<!--        redirect: undefined,-->
<!--        otherQuery: {}-->
<!--      }-->
<!--    },-->
<!--    watch: {-->
<!--      $route: {-->
<!--        handler: function(route) {-->
<!--          const query = route.query-->
<!--          if (query) {-->
<!--            this.redirect = query.redirect-->
<!--            this.otherQuery = this.getOtherQuery(query)-->
<!--          }-->
<!--        },-->
<!--        immediate: true-->
<!--      }-->
<!--    },-->
<!--    created() {-->
<!--      // window.addEventListener('storage', this.afterQRScan)-->
<!--    },-->
<!--    mounted() {-->
<!--      if (this.loginForm.username === '') {-->
<!--        this.$refs.username.focus()-->
<!--      } else if (this.loginForm.password === '') {-->
<!--        this.$refs.password.focus()-->
<!--      }-->
<!--    },-->
<!--    destroyed() {-->
<!--      // window.removeEventListener('storage', this.afterQRScan)-->
<!--    },-->
<!--    methods: {-->
<!--      checkCapslock({ shiftKey, key } = {}) {-->
<!--        if (key && key.length === 1) {-->
<!--          if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {-->
<!--            this.capsTooltip = true-->
<!--          } else {-->
<!--            this.capsTooltip = false-->
<!--          }-->
<!--        }-->
<!--        if (key === 'CapsLock' && this.capsTooltip === true) {-->
<!--          this.capsTooltip = false-->
<!--        }-->
<!--      },-->
<!--      showPwd() {-->
<!--        if (this.passwordType === 'password') {-->
<!--          this.passwordType = ''-->
<!--        } else {-->
<!--          this.passwordType = 'password'-->
<!--        }-->
<!--        this.$nextTick(() => {-->
<!--          this.$refs.password.focus()-->
<!--        })-->
<!--      },-->
<!--      handleLogin() {-->
<!--        this.$refs.loginForm.validate(valid => {-->
<!--          if (valid) {-->

<!--              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })-->
<!--              this.loading = false-->



<!--          } else {-->
<!--            console.log('error submit!!')-->
<!--            return false-->
<!--          }-->
<!--        })-->
<!--      },-->
<!--      getOtherQuery(query) {-->
<!--        return Object.keys(query).reduce((acc, cur) => {-->
<!--          if (cur !== 'redirect') {-->
<!--            acc[cur] = query[cur]-->
<!--          }-->
<!--          return acc-->
<!--        }, {})-->
<!--      }-->
<!--      // afterQRScan() {-->
<!--      //   if (e.key === 'x-admin-oauth-code') {-->
<!--      //     const code = getQueryObject(e.newValue)-->
<!--      //     const codeMap = {-->
<!--      //       wechat: 'code',-->
<!--      //       tencent: 'code'-->
<!--      //     }-->
<!--      //     const type = codeMap[this.auth_type]-->
<!--      //     const codeName = code[type]-->
<!--      //     if (codeName) {-->
<!--      //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {-->
<!--      //         this.$router.push({ path: this.redirect || '/' })-->
<!--      //       })-->
<!--      //     } else {-->
<!--      //       alert('第三方登录失败')-->
<!--      //     }-->
<!--      //   }-->
<!--      // }-->
<!--    }-->
<!--  }-->
<!--</script>-->

<!--<style lang="scss">-->
<!--  /* 修复input 背景不协调 和光标变色 */-->
<!--  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */-->

<!--  $bg:#283443;-->
<!--  $light_gray:#fff;-->
<!--  $cursor: #fff;-->

<!--  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {-->
<!--    .login-container .el-input input {-->
<!--      color: $cursor;-->
<!--    }-->
<!--  }-->

<!--  /* reset element-ui css */-->
<!--  .login-container {-->
<!--    .el-input {-->
<!--      display: inline-block;-->
<!--      height: 47px;-->
<!--      width: 85%;-->

<!--      input {-->
<!--        background: transparent;-->
<!--        border: 0px;-->
<!--        -webkit-appearance: none;-->
<!--        border-radius: 0px;-->
<!--        padding: 12px 5px 12px 15px;-->
<!--        color: $light_gray;-->
<!--        height: 47px;-->
<!--        caret-color: $cursor;-->

<!--        &:-webkit-autofill {-->
<!--          box-shadow: 0 0 0px 1000px $bg inset !important;-->
<!--          -webkit-text-fill-color: $cursor !important;-->
<!--        }-->
<!--      }-->
<!--    }-->

<!--    .el-form-item {-->
<!--      border: 1px solid rgba(255, 255, 255, 0.1);-->
<!--      background: rgba(0, 0, 0, 0.1);-->
<!--      border-radius: 5px;-->
<!--      color: #454545;-->
<!--    }-->
<!--  }-->
<!--</style>-->

<!--<style lang="scss" scoped>-->
<!--  $bg:#2d3a4b;-->
<!--  $dark_gray:#889aa4;-->
<!--  $light_gray:#eee;-->

<!--  .login-container {-->
<!--    min-height: 100%;-->
<!--    width: 100%;-->
<!--    background-color: $bg;-->
<!--    overflow: hidden;-->

<!--    .login-form {-->
<!--      position: relative;-->
<!--      width: 520px;-->
<!--      max-width: 100%;-->
<!--      padding: 160px 35px 0;-->
<!--      margin: 0 auto;-->
<!--      overflow: hidden;-->
<!--    }-->

<!--    .tips {-->
<!--      font-size: 14px;-->
<!--      color: #fff;-->
<!--      margin-bottom: 10px;-->

<!--      span {-->
<!--        &:first-of-type {-->
<!--          margin-right: 16px;-->
<!--        }-->
<!--      }-->
<!--    }-->

<!--    .svg-container {-->
<!--      padding: 6px 5px 6px 15px;-->
<!--      color: $dark_gray;-->
<!--      vertical-align: middle;-->
<!--      width: 30px;-->
<!--      display: inline-block;-->
<!--    }-->

<!--    .title-container {-->
<!--      position: relative;-->

<!--      .title {-->
<!--        font-size: 26px;-->
<!--        color: $light_gray;-->
<!--        margin: 0px auto 40px auto;-->
<!--        text-align: center;-->
<!--        font-weight: bold;-->
<!--      }-->
<!--    }-->

<!--    .show-pwd {-->
<!--      position: absolute;-->
<!--      right: 10px;-->
<!--      top: 7px;-->
<!--      font-size: 16px;-->
<!--      color: $dark_gray;-->
<!--      cursor: pointer;-->
<!--      user-select: none;-->
<!--    }-->

<!--    .thirdparty-button {-->
<!--      position: absolute;-->
<!--      right: 0;-->
<!--      bottom: 6px;-->
<!--    }-->

<!--    @media only screen and (max-width: 470px) {-->
<!--      .thirdparty-button {-->
<!--        display: none;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</style>-->
